<template>
  <div :class='s.wrap'>
    <div :class='s.headerWrap'>
      <div :class='s.header'>
        <img :src='msgProps.USER_HEAD'>
      </div>
      <div :class='s.nickname'>{{msgProps.NICKNAME}}</div>
    </div>
    <div :class='s.msgWrap'>
      <div :class='s.msg'
        v-html='' 
        :style='{display: msgProps.COMMUNITY_DATE === "" || !msgProps.COMMUNITY_DATE ? "flex" : "inline-flex"}'>{{msgProps.COMMUNITY_CONTENT | filterContent }}</div>
      <div :class='s.time'>{{msgProps.COMMUNITY_DATE, msgProps.COMMUNITY_TIME | filterTime }}</div>
    </div>
  </div>
</template>

<script>
import filterTime from './filterTime'
import filterContent from './filterContent'
export default {
  filters: { filterTime, filterContent },
  props: {
    msgProps: {
      type: Object,
      default: function () {
        return {
          USER_HEAD: '',
          USER_CODE: '',
          COMMUNITY_CONTENT: '',
          NICKNAME: '',
          COMMUNITY_DATE: '',
          COMMUNITY_TIME: ''
        }
      }
    }
  },
  mounted () {
    if (this.msgProps.USER_HEAD === '') {
      this.msgProps.USER_HEAD = 'https://dl.app.gtja.com/pictures/niutou/tou' + (parseInt(parseInt(this.msgProps.USER_CODE) % 8) + 1) + '@2x.png'
      // console.info('userCode', this.msgProps.USER_CODE)
      // this.msgProps.USER_HEAD = 'https://dl.app.gtja.com/pictures/niutou/tou2@2x.png'
    }
  }
}
</script>
<style lang="less" module='s'>
.wrap{
  display: flex;
  align-items: flex-end;
  margin: 20px 20px 0px 20px;
}
.headerWrap{
  text-align: center;
  width: 100px;
  .header{
    width: 80px;
    height: 80px;
    background-color: #ddd;
    border-radius: 50%;
    margin-bottom: 10px;
    img{
      width: 100%;
      border-radius: 50%;
    }
  }
  .nickname{
    min-height: 20px;
    width: 100%;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
  }
}
.msgWrap{
  flex: 1;
  margin: 0 20px;
  .time{
    color: #999;
    min-width: 50px;
    min-height: 20px;
  }
}
.msg{
  display: inline-flex;
  align-items: center;
  background-color: #ddd;
  min-height: 40px;
  border-radius: 5px;
  padding: 20px;
  font-size: 22px;
  word-break: break-all;
  &:before{
    content: '';
    display: block;
    width: 12px;
    border-bottom: solid 10px #ddd;
    border-left: solid 10px transparent;
    position: absolute;
    bottom: 0;
    left: -10px;
  }
}
</style>

